关于CSS的那些事

CSS简介

想要制作出好看又高大上的网页，除了编写好HTML文件外，CSS的编写也必不可少。CSS的英文全称是Cascading Style Sheets，即层叠样式表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。下面我来介绍一些关于CSS的小技巧。

---

什么是文档流？

文档流的英文是 Normal Flow，其含义为文档内元素的流动方向，简单来说就是内联元素从左往右，块级元素从上往下流动。文档流中内联元素默认从左到右排列，宽度不够则自动换行；而文档流中块级元素从上到下排列，每个元素占一行。其中，float:left、position:absolute、position: fixed 可以使元素脱离文档流。

---

内联元素

给 inline 元素设置宽高是没有任何效果的，但是为其设置 margin、padding都是有效果的。

---

div高度由什么决定？

div高度由其内部文档流元素高度总和决定，一旦元素脱离了文档流就不再计入div高度中。

---

content-box 与 border-box 的区别是什么？

border-box 的 width 包括 padding 和 border，而content-box 正好与之相反，其width 不包括 padding 和 border。

---

关于背景图片的那些小技巧

1 背景图片太大没办法居中显示怎么办？

background-position:center center;

2 想完整显示图片如何按比例缩放？

background-size:cover;

3 想要在页面上显示两个空格，应该怎么写代码？
在代码里写    才行。

---

如何做横向布局？

当我们想要让某些元素做横向布局时，我们都可以用以下套路来实现：

1. 给所有想要在一行内的子元素加上float: left;属性

2. 给所有父元素加上 clearfix 类
   其中 clearfix 类为：

     .clearfix::after{
        content: '';
        display: block;
        clear: both;
     }
   

---

CSS画三角形

下面我们将利用纯css来画一个三角形:

div{
    border: 10px solid transparent;
    width: 0px;
    border-left-color: #e6686a;
    border-top-width: 0px;
}